<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3.分析Hello效果</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>

    <!-- 准备一个容器 -->
    <div id="demo">
      <h2>学校名称：{{school}}</h2>
      <h2>学校地址：{{address}}</h2>
      <h2>学校楼层：{{floor}}楼</h2>
      <h2>楼层高低：{{floor > 6 ? '高' : '低'}}</h2>

      <h2>测试1：{{floor+1}}楼</h2>
      <h2>测试2：{{school.toUpperCase()}}</h2>
      <h2>测试3：{{1+1}}</h2>
      <h2>测试4：1+1</h2>
      <h2>测试5：school.toUpperCase()</h2>
      <h2>测试6：{school.toUpperCase()}</h2>
    </div>

    <!-- 创建一个Vue实例 -->
    <script type="text/javascript" >
      new Vue({
        el:'#demo',
        data:{
          school:'atguigu',
          address:'宏福科技园',
          floor:3
        }
      })
    </script>

  </body>
</html>